<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="box">
        <p class="title">套餐名称</p>
        <p class="price">
          <input v-model.trim="formData.thaliName" type="text" placeholder="请输入套餐名称">
        </p>
      </div>
      <div class="box">
        <p class="title">价格</p>
        <p class="price">
          <input v-model.trim="formData.price" type="text" placeholder="请输入价格">
        </p>
      </div>
      <div class="box">
        <p class="title">小时数</p>
        <p class="price">
          <input v-model.trim="formData.hours" type="text" placeholder="请输入小时数">
        </p>
      </div>
    </div>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        :loading-text="formData.id?'修改中...':'新增中...'"
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >{{formData.id?'立即修改':'立即新增'}}</van-button>
    </div>
  </div>
</template>
 
<script>
import {
  addRoomThali,
  updateRoomThali,
  getRoomThali
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      formData:{
        hours:'',
        price:'',
        thaliName:'',
        roomId:''
      },
      loading:false
    };
  },
  onShow() {},

  methods: {

    // 回显
    getHuixian(id){
      this.$showLoading('加载中...')
      getRoomThali({id}).then(res=>{
        if(res.statusCode == '00000'){
          this.formData = res.data
          wx.hideLoading()
        }else{
          wx.hideLoading()
        }
      })
    },

    // 提交
    submit(){
      if(!this.formData.thaliName){
        this.$toast('请输入套餐名称')
        return
      }
      if(!this.formData.price){
        this.$toast('请输入价格')
        return
      }
      if(!this.formData.hours){
        this.$toast('请输入小时数')
        return
      }
      this.$showLoading(this.formData.id?'修改中...':'新增中...')
      this.loading = true
      let returnData = this.formData.id?updateRoomThali(this.formData):addRoomThali(this.formData)
      returnData.then(res=>{
        if(res.statusCode == '00000'){
          this.loading = false
          wx.navigateBack({
            delta: 1
          });
          wx.hideLoading()
          this.$toast(this.formData.id?'修改成功':'新增成功')
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

  },
  onHide() {},
  onLoad(options) {
    this.formData.roomId = options.roomId
    if(options.id){
      this.formData.id = options.id
      this.getHuixian(options.id)
    }else{
      delete this.formData.id
    }
  },
  onUnload() {
    this.formData = {
      hours:'',
      price:'',
      thaliName:'',
    }
  },
};
</script>

<style lang="scss" scoped>
.msg_box{
  margin:0 30rpx;
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .price{
      display: flex;
      align-items: center;
      input{
        text-align: right;
        margin-right:20rpx;
        height: 100rpx;
        flex: 1;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
</style>
